<template>
  <div class="course-selection-container">
    <div class="page-header">
      <h2>选课系统</h2>
    </div>

    <el-card class="box-card">
      <div class="search-bar">
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="课程编号">
            <el-input v-model="searchForm.courseId" placeholder="请输入课程编号" clearable />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="searchForm.name" placeholder="请输入课程名称" clearable />
          </el-form-item>
          <el-form-item label="课程类型">
            <el-select v-model="searchForm.type" placeholder="请选择课程类型" clearable>
              <el-option
                v-for="item in courseTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>搜索
            </el-button>
            <el-button @click="resetSearch">
              <el-icon><Refresh /></el-icon>重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="availableCourseList" style="width: 100%" border>
        <el-table-column prop="courseId" label="课程编号" width="120" />
        <el-table-column prop="name" label="课程名称" width="150" />
        <el-table-column prop="typeName" label="课程类型" width="120">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.type)">
              {{ scope.row.typeName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="80" />
        <el-table-column prop="hours" label="学时" width="80" />
        <el-table-column prop="teacher" label="授课教师" width="120" />
        <el-table-column prop="semester" label="开课学期" width="120" />
        <el-table-column prop="description" label="课程描述" min-width="200" show-overflow-tooltip />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button 
              v-if="!isSelected(scope.row.id)" 
              size="small" 
              type="primary" 
              @click="handleSelect(scope.row)"
            >
              <el-icon><Plus /></el-icon>选课
            </el-button>
            <el-button 
              v-else 
              size="small" 
              type="danger" 
              @click="handleCancel(scope.row)"
            >
              <el-icon><Delete /></el-icon>退选
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 已选课程 -->
    <el-card class="box-card" style="margin-top: 20px">
      <template #header>
        <div class="card-header">
          <span>已选课程</span>
          <el-tag type="success">已选 {{ selectedCourses.length }} 门，共 {{ totalCredits }} 学分</el-tag>
        </div>
      </template>
      <el-table :data="selectedCourses" style="width: 100%" border>
        <el-table-column prop="courseId" label="课程编号" width="120" />
        <el-table-column prop="name" label="课程名称" width="150" />
        <el-table-column prop="typeName" label="课程类型" width="120">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.type)">
              {{ scope.row.typeName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="80" />
        <el-table-column prop="hours" label="学时" width="80" />
        <el-table-column prop="teacher" label="授课教师" width="120" />
        <el-table-column prop="semester" label="开课学期" width="120" />
        <el-table-column label="操作" fixed="right" width="120">
          <template #default="scope">
            <el-button size="small" type="danger" @click="handleCancel(scope.row)">
              <el-icon><Delete /></el-icon>退选
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { Plus, Search, Refresh, Delete } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '../stores/user';

// 初始化用户存储
const userStore = useUserStore();

// 搜索表单
const searchForm = reactive({
  courseId: '',
  name: '',
  type: '',
});

// 分页参数
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 课程类型
const courseTypes = ref([
  { value: '1', label: '必修课' },
  { value: '2', label: '选修课' },
  { value: '3', label: '公共课' },
  { value: '4', label: '专业课' },
]);

// 可选课程列表
const availableCourseList = ref([
  {
    id: 1,
    courseId: 'CS101',
    name: '计算机导论',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '张教授',
    semester: '2023-2024-1',
    description: '本课程介绍计算机科学的基本概念和原理，包括计算机历史、硬件、软件、网络等内容。',
  },
  {
    id: 2,
    courseId: 'CS102',
    name: '程序设计基础',
    type: '1',
    typeName: '必修课',
    credit: 4,
    hours: 64,
    teacher: '李教授',
    semester: '2023-2024-1',
    description: '本课程介绍程序设计的基本概念和方法，包括算法、数据类型、控制结构、函数等内容。',
  },
  {
    id: 3,
    courseId: 'CS201',
    name: '数据结构',
    type: '1',
    typeName: '必修课',
    credit: 4,
    hours: 64,
    teacher: '王教授',
    semester: '2023-2024-2',
    description: '本课程介绍数据结构的基本概念和实现方法，包括数组、链表、栈、队列、树、图等内容。',
  },
  {
    id: 4,
    courseId: 'CS202',
    name: '算法分析与设计',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '赵教授',
    semester: '2023-2024-2',
    description: '本课程介绍算法分析与设计的基本方法，包括时间复杂度、空间复杂度、分治法、动态规划等内容。',
  },
  {
    id: 5,
    courseId: 'CS301',
    name: '操作系统',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '钱教授',
    semester: '2024-2025-1',
    description: '本课程介绍操作系统的基本概念和原理，包括进程管理、内存管理、文件系统、设备管理等内容。',
  },
  {
    id: 6,
    courseId: 'CS302',
    name: '计算机网络',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '孙教授',
    semester: '2024-2025-1',
    description: '本课程介绍计算机网络的基本概念和原理，包括网络体系结构、物理层、数据链路层、网络层、传输层、应用层等内容。',
  },
  {
    id: 7,
    courseId: 'CS401',
    name: '人工智能',
    type: '2',
    typeName: '选修课',
    credit: 3,
    hours: 48,
    teacher: '周教授',
    semester: '2024-2025-2',
    description: '本课程介绍人工智能的基本概念和方法，包括搜索、知识表示、机器学习、神经网络等内容。',
  },
  {
    id: 8,
    courseId: 'CS402',
    name: '数据库系统',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '吴教授',
    semester: '2024-2025-2',
    description: '本课程介绍数据库系统的基本概念和原理，包括关系模型、SQL语言、数据库设计、事务处理等内容。',
  },
  {
    id: 9,
    courseId: 'CS403',
    name: '软件工程',
    type: '1',
    typeName: '必修课',
    credit: 3,
    hours: 48,
    teacher: '郑教授',
    semester: '2024-2025-2',
    description: '本课程介绍软件工程的基本概念和方法，包括软件生命周期、需求分析、系统设计、编码、测试、维护等内容。',
  },
  {
    id: 10,
    courseId: 'CS501',
    name: '机器学习',
    type: '2',
    typeName: '选修课',
    credit: 3,
    hours: 48,
    teacher: '冯教授',
    semester: '2023-2024-1',
    description: '本课程介绍机器学习的基本概念和方法，包括监督学习、无监督学习、强化学习等内容。',
  },
]);

// 已选课程列表
const selectedCourses = ref([]);

// 计算总学分
const totalCredits = computed(() => {
  return selectedCourses.value.reduce((total, course) => total + course.credit, 0);
});

// 判断课程是否已选
const isSelected = (courseId) => {
  return selectedCourses.value.some(course => course.id === courseId);
};

// 获取标签类型
const getTagType = (type) => {
  switch (type) {
    case '1':
      return 'danger';
    case '2':
      return 'success';
    case '3':
      return 'info';
    case '4':
      return 'warning';
    default:
      return '';
  }
};

// 搜索
const handleSearch = () => {
  // 模拟搜索操作
  console.log('搜索条件：', searchForm);
  // 实际应用中应该调用API进行搜索
};

// 重置搜索
const resetSearch = () => {
  searchForm.courseId = '';
  searchForm.name = '';
  searchForm.type = '';
  handleSearch();
};

// 选课
const handleSelect = (course) => {
  if (selectedCourses.value.length >= 10) {
    ElMessage.warning('最多只能选择10门课程！');
    return;
  }
  
  if (totalCredits.value + course.credit > 30) {
    ElMessage.warning('总学分不能超过30学分！');
    return;
  }
  
  selectedCourses.value.push(course);
  ElMessage.success(`成功选择课程：${course.name}`);
};

// 退选
const handleCancel = (course) => {
  const index = selectedCourses.value.findIndex(item => item.id === course.id);
  if (index !== -1) {
    selectedCourses.value.splice(index, 1);
    ElMessage.success(`已退选课程：${course.name}`);
  }
};

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  // 重新加载数据
};

// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 重新加载数据
};

// 页面加载时初始化数据
onMounted(() => {
  // 模拟从服务器获取数据
  total.value = availableCourseList.value.length;
});
</script>

<style scoped>
.course-selection-container {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>